<link rel="stylesheet" href="/assets/home/css/poster.css">


<header class="mui-bar mui-bar-nav mui-bar-nav-bg">
    <a id="icon-menu" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">推广海报</h1>
</header>

<div class="poster">

</div>

<div class="content">
    {if condition="$AutoLogin.poster"}
    <div class="poster">
        <img src="{$AutoLogin.poster}" />
    </div>
    {/if}
</div>

<div class="link">
    <!-- readonly是只读，不能改写。 -->
    <input type="text" placeholder="普通输入框" readonly id="url" value="{$url}" />

    <!-- 给button按钮绑定点击事件。类型 type="button"；onclick="btn",事件为点击事件且方法为btn,
     btn方法是在下面脚本<script></script>里面定义。逻辑：上面一点击，触发点击事件，就来到下面btn()方法这里
     注意，不可以用copy代替btn作为方法名,因为copy是关键字。-->
    <button class="mui-btn mui-btn-primary" type="button" id="btn">点击复制</button>
</div>

<!-- 重新生成海报 -->
<div class="update">
    <button class="mui-btn mui-btn-success" type="button" id="update">重新生成海报</button>
</div>


<div class="footer">
    <button class="btn mui-btn-primary">分享</button>
</div>

<script>

    // 通过id,获取id=btn的元素，并且赋值给变量btn。
    // 在JavaScript中，document.getElementById()方法用于获取页面上具有指定ID的元素。如果页面上没有具有该ID的元素，该方法将返回null。
    var btn = document.getElementById('btn')

    // 获取updata元素，并且赋值给变量updata
    var update = document.getElementById('update')

    // var poster = document.getElementById('poster').getAttribute('src')

    // 复制
    btn.onclick = async function () {
        var url = document.getElementById('url')

        url.select()

        document.execCommand("copy", false)
    }

    // 更新。
    /*
    通过被赋值元素的变量updata(第一个)，绑定一个点击事件，点击后执行临时函数function(),
    临时函数里面是发送ajax请求到控制器Team.php里面的poster()方法，
    */
    /*$.ajax({})这段代码的关键部分如下：
         $.ajax: 这是 jQuery 提供的一个函数，用于发送 AJAX 请求。
 
         type: 'POST': 这行代码设置了请求的类型为 POST。这意味着您正在向服务器发送数据，通常用于创建、更新或删除资源。
 
         dataType: 'json': 这行代码告诉 jQuery 期望服务器返回的数据类型为 JSON。这意味着 jQuery 会自动将服务器返回的 JSON 字符串解析为 JavaScript 对象。
 
         success: function(success) { ... }: 这是一个回调函数，当 AJAX 请求成功时会被调用。success 参数是服务器返回的数据，它已经被 jQuery 自动解析为 JavaScript 对象。
 
         mui.toast(success.msg): 这行代码使用了 mui.toast 函数来显示服务器返回的消息。success.msg 是服务器返回的数据中的 msg 字段。
 
         if (success.code) { ... }: 这行代码检查服务器返回的数据中是否包含 code 字段。如果存在，则执行 if 语句块内的代码。
 
         $("#poster").prop('src', success.data.poster): 这行代码更新了 id 为 poster 的元素的 src 属性。success.data.poster 
         是服务器返回的数据中的海报图片 URL。*/
    update.onclick = function () {
        $.ajax({
            type: 'POST',
            dataType: 'json',
            success: (success) => {
                mui.toast(success.msg)

                if (success.code) {
                    /* prop()是jQuery里面的方法，用于设置或返回元素的属性和值，success.data.poster 是服务器返回的数据中的海报图片 URL，
                    在poster.html那里找到id=poster的元素，。
                    */
                    $("#poster").prop('src', success.data.poster)
                }
            }
        })
    }
</script>